<template>
      <div
      class="menu-logo-box aic jcc"
      :style="{
        background: $store.state.isFull
          ? 'var(--navColorBg)'
          : $store.state.themeCurrentMenuItem.ColorBg,
      }"
    >
      <img src="/src/assets/svg/login-box-bg.svg" alt="" />
      <div
        class=""
        v-show="!isCollapse"
        :style="{
          color:$store.state.isFull?'var(--navColorFont)'
          :
          $store.state.navTitleColorFont,
        }"
      >
        {{ $store.state.projectName }}
      </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,getCurrentInstance } from 'vue';
    const internalInstance = getCurrentInstance();//获取当前实例
    const route = internalInstance?.appContext.config.globalProperties.$route;

/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
 const activeIndex =ref(0);
 const state = reactive({
   data:{a:1}
 })
const handleSelect = ()=>{}
defineProps({
  isCollapse: {
    type: Boolean,
    required: true,
  },
  
});

</script>

<style  scoped lang="scss" >
.menu-logo-box {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  height: 54px;
  background-color: #001529;

  img {
    width: 45px;
  }
  div {
    font-size: 22px;
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
  }
}
</style>
